<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改学生</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <style>
        .layui-form {
            margin-top: 10px;
        }

        .layui-textarea {
            width: 60%
        }
    </style>
</head>

<body>
    <!-- 面包屑 -->
    <span class="layui-breadcrumb">
        <a href="">学生管理</a>
        <a><cite>修改学生</cite></a>
    </span>
    <form class="layui-form">
        <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">学号</label>
            <div class="layui-input-inline">
                <input id="studentNo" name="studentNo" readonly type="text" placeholder="请输入学号" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input id="loginPwd" name="loginPwd" lay-verify="required" type="password" placeholder="请输入密码"
                    autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input id="studentName" name="studentName" lay-verify="required" type="text" placeholder="请输入姓名"
                    autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-inline">
                <input id="M" type="radio" name="sex" value="M" title="男">
                <input id="F" type="radio" name="sex" value="F" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择年级</label>
            <div class="layui-input-inline">
                <select id="gradeId" name="gradeId" lay-filter="aihao" lay-verify="required">

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-inline">
                <input id="bornDate" name="bornDate" lay-verify="required|date" type="text" placeholder="请输入生日"
                    autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input id="phone" name="phone" lay-verify="required|phone" type="text" placeholder="请输入电话"
                    autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <textarea id="address" name="address" placeholder="请输入地址" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input id="email" name="email" lay-verify="required|email" type="text" placeholder="请输入邮箱"
                    autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身份证</label>
            <div class="layui-input-inline">
                <input id="identityCard" name="identityCard" lay-verify="required|identity" type="text"
                    placeholder="请输入身份证" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                <button id="reset" type="button" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <!-- 生成年级下拉框的模板 -->
    <script id="temp" type="text/html">
        {{# layui.each(d.list,function(index,item){ }}
        <option value="{{item.GradeId}}">{{item.GradeName}}</option>
        {{# }) }}
    </script>
    <script src="../../layui/layui.js"></script>
    <script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>
    <script>
        layui.use(['form', 'element', 'laydate', 'jquery', 'laytpl', 'layer'], function () {
            var element = layui.element;    //基础模块
            var form = layui.form;          //表单模块
            var laydate = layui.laydate;     //日期模块
            var $ = layui.jquery;            //引入jquery模块
            var laytpl = layui.laytpl;      //引入模板引擎模块
            var layer = layui.layer;        //引入弹出层模块

            //执行一个laydate实例
            laydate.render({
                elem: '#bornDate'
            });

            //获取全部年级信息
            $.get('http://www.bingjs.com:81/Grade/GetAll', res => {
                res.unshift({ GradeId: '', GradeName: '请选择年级' })
                laytpl($('#temp').html()).render({ list: res }, function (html) {
                    $('#gradeId').html(html)
                })
                //在表单中渲染下拉框
                form.render('select');

                loadStudent()  //调用加载学生信息的方法
            })

            //加载学生信息的方法
            function loadStudent() {
                //获取从查询窗体传过来的学号
                //location.search => ?studentNo=S1001
                //.replace('?', '') => studentNo=S1001
                //.split('=') => ['studentNo','S1001']
                //[1] => S1001
                let studentNo = location.search.replace('?', '').split('=')[1]
                //根据学号，查询对应的学生信息
                $.get('http://www.bingjs.com:81/Student/GetStudentByNo', {
                    studentNo
                }, s => {
                    //显示学生的信息
                    $('#studentNo').val(s.StudentNo)
                    $('#loginPwd').val(s.LoginPwd)
                    $('#studentName').val(s.StudentName)
                    //判断学生的性别是M还是F，M表示男，F表示女
                    if (s.Sex === 'M') {
                        //如果是M，男单选按钮选中
                        $('#M').prop('checked', true)
                    } else {
                        //如果是F，女单选按钮选中
                        $('#F').prop('checked', true)
                    }
                    //在表单中渲染单选框
                    form.render('radio');

                    $('#gradeId').val(s.GradeId)
                    //在表单中渲染下拉框
                    form.render('select');

                    $('#bornDate').val(moment(s.BornDate).format('YYYY-MM-DD'))
                    $('#phone').val(s.Phone)
                    $('#address').val(s.Address)
                    $('#email').val(s.Email)
                    $('#identityCard').val(s.IdentityCard)
                })
            }

            //重置按钮点击事件
            $('#reset').click(function(){
                loadStudent()  //调用加载学生信息的方法
            })

            //监听表单的提交事件
            form.on('submit(*)', function (data) {
                let obj = data.field //当前容器的全部表单字段，名值对形式：{name: value}
                //执行修改
                $.post('http://www.bingjs.com:81/Student/Update', obj,
                    res => {
                        if (res) {
                            layer.open({
                                title: '系统提示',
                                content: '修改成功',
                                //确定按钮的回调
                                yes: function (index, layero) {
                                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                                    //先得到当前iframe层的索引
                                    let parentIndex = parent.layer.getFrameIndex(window.name); 
                                    //再执行关闭
                                    parent.layer.close(parentIndex); 
                                }
                            });
                        }
                    })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            })
        });
    </script>
</body>

</html>